<html>
<head>
    <meta charset="UTF-8">
    <title>تىلىفۇن دەپتىرى</title>
    <link rel="stylesheet" href="app.css样式表.css">
</head>
<body>
<div id="main" class="full row">
    <div class="space-full">
        <div id="nowattiki" class="full rtl bg-gray2 column">
            <div class="space-full row margin-16px">
                <img id="nowattiki_rasim" class="height-64px width-64px bg-blue radius-all-32px"></img>
                <div class="height-64px column margin-lr-16px">
                    <div id="nowattiki_isim" class="space-full vertical-center txt-large">xxxx</div>
                    <div id="nowattiki_nomur" class="space-full vertical-center txt-large">xxxxxx</div>
                </div>
            </div>
            <div class="height-64px row margin-16px">
                <div onclick="ochirux()" class=" height-32px width-228px margin-16px bg-red5 center txt-white radius-all-16px">ئۆچۈرۈش</div>
                <div onclick="tahrirlax_biti('O')" class="height-32px width-228px margin-16px bg-yellow8 txt-white center radius-all-16px">ئۆزگەرتىش</div>
            </div>
        </div>

    </div>
    <div class="width-296px full-height column bg-white">
        <div class="height-48px row vertical-center margin-lr-16px">
            <div onclick="tahrirlax_biti('K')" class="center height-32px width-32px radius-all-16px bg-red5 txt-white txt-large">+</div>
            <div class="width-16px"></div>
            <input id="izdaxramkisi" oninput="izdax()" type="text" placeholder="ئىسىم ياكى نومۇر كىرگۈزۈڭ" class="txt-center rtl height-32px space-full radius-all-16px bg-yellow5">
        </div>
        <div class="bg-gray5" style="height: 1px;"></div>
        <div id="nomurlar" class="space-full column margin-8px bg-gray2 radius-all-8px">

        </div>
    </div>
</div>

<div id="edit" class="full column">
    <div class="space-full column rtl margin-16px">
        <div class="row">
            <img id="rasim" class="bg-red5 width-64px height-64px margin-top-8px radius-all-32px"></img>
            <div class="column height-64px margin-16px">
                <div class="height-16px">رەسىم ئادىرسىنى كىرگزۈڭ:</div>
                <input id="rasim_adirsi" oninput="rasim_yukle()" class="height-32px margin-top-8px radius-all-16px txt-center width-228px" type="text" placeholder="رەسىم ئادىرسىنى كىرگۈزۈڭ">
            </div>
        </div>
        <div class="height-16px margin-top-16px">ئىسمىنى كىرگۈزۈڭ:</div>
        <input id="isim" class="height-32px margin-top-8px radius-all-16px txt-center width-228px" type="text" placeholder="ئىسمىنى كىرگۈزۈڭ">
        <div class="height-16px margin-top-16px">تىلفۇن نومۇرنى كىرگۈزۈڭ:</div>
        <input id="nomur" class="height-32px margin-top-8px radius-all-16px txt-center width-228px" type="tel" placeholder="تىلفۇن نومۇرنى كىرگۈزۈڭ">
        <div class="row width-228px margin-top-16px">
            <div id="koxux_saklax" onclick="koxux()" class="center txt-white height-32px space-full bg-red5 center radius-top-right-16px radius-bottom-right-16px">قوشۇش</div>
            <div id="ozgartix_saklax" onclick="ozgartish()" class="center txt-white height-32px space-full bg-yellow8 center radius-top-right-16px radius-bottom-right-16px">ساقلاش</div>
            <div onclick="qikinx()" class="center txt-white height-32px space-full bg-green5 center radius-bottom-left-16px radius-top-left-16px">چىكىنىش</div>
        </div>
    </div>
    <div class="margin-bottom-8px">
        <div class="height-48px txt-smaller row">
        </div>
    </div>
</div>
</body>
</html>


<script>
    let main = document.getElementById("main");
    let edit = document.getElementById("edit");
    let isim_ramkisi = document.getElementById("isim");
    let nomur_ramkisi = document.getElementById("nomur");
    let rasim_adirsi = document.getElementById("rasim_adirsi");
    let nomurlar = document.getElementById("nomurlar");
    let izdaxramkisi = document.getElementById("izdaxramkisi");
    let nowattiki_isim = document.getElementById("nowattiki_isim");
    let nowattiki_nomur = document.getElementById("nowattiki_nomur");
    let nowattiki_index = -1;
    let koxux_saklax = document.getElementById("koxux_saklax");
    let ozgartix_saklax = document.getElementById("ozgartix_saklax");
    let nowattiki = document.getElementById("nowattiki");
    let nowattiki_rasim = document.getElementById("nowattiki_rasim");
    let rasim = document.getElementById("rasim");

    nowattiki.style.display = "none";

    main.style.display = "flex";
    edit.style.display = "none";

    let tizimlik = JSON.parse(localStorage.getItem("tizimlik")) ?? [];
    korunmayuzyiglash(tizimlik);
    let izdax_natijisi = [];

    function koxux() {
        isim = isim_ramkisi.value;
        nomur = nomur_ramkisi.value;
        if (isim === '') {
            alert("isim kirguzug");
            return;
        }
        if (nomur === '' || nomur.length !== 11) {
            alert("nomuer 11 raqamli bo'lishi kerak");
            return;
        }
        if (tizimlik.some(item => item.nomur === nomur || item.isim === isim)) {
            alert("Bu nomurda yoki isimda tizimlik qo'shildi");
            return;
        }
        tizimlik.push({
            isim: isim,
            nomur: nomur,
            rasim_adirsi: rasim_adirsi.value
        });
        localStorage.setItem("tizimlik", JSON.stringify(tizimlik));
        alert("Tizimlik qo'shildi");
        main.style.display = "flex";
        edit.style.display = "none";
        korunmayuzyiglash(tizimlik);
    }

    function ozgartish() {
        index = nowattiki_index;
        isim = isim_ramkisi.value;
        nomur = nomur_ramkisi.value;
        if (index >= tizimlik.length || index < 0) {
            alert("Tizimlik topilmadi");
            return;
        }
        if (isim === '') {
            alert("isim kirguzug");
            return;
        }
        if (nomur === '' || nomur.length !== 11) {
            alert("nomuer 11 raqamli bo'lishi kerak");
            return;
        }
        let bar_index = tizimlik.findIndex(item => item.nomur === nomur && item.isim === isim);
        if (bar_index >= 0 && bar_index !== index) {
            alert("Bu nomurda yoki isimda tizimlik qo'shildi");
            return;
        }
        tizimlik[index].isim = isim;
        tizimlik[index].nomur = nomur;
        tizimlik[index].rasim_adirsi = rasim_adirsi.value
        localStorage.setItem("tizimlik", JSON.stringify(tizimlik));
        alert("Tizimlik ozgartirildi");
        main.style.display = "flex";
        edit.style.display = "none";
        korunmayuzyiglash(tizimlik);
        nowattiki_rasim.src = rasim_adirsi.value;
        nowattiki_isim.innerHTML = isim;
        nowattiki_nomur.innerHTML = nomur;
    }

    function ochirux() {
        index = nowattiki_index;
        if (index >= tizimlik.length || index < 0) {
            alert("Tizimlik topilmadi");
            return;
        }
        tizimlik.splice(index, 1);
        localStorage.setItem("tizimlik", JSON.stringify(tizimlik));
        alert("Tizimlik o'chirildi");
        korunmayuzyiglash(tizimlik);
        nowattiki.style.display = "none";
    }

    function izdax() {
        isimyakinomur = izdaxramkisi.value;
        if (isimyakinomur === '') {
            korunmayuzyiglash(tizimlik);
            return;
        }
        izdax_natijisi = tizimlik.filter(item => item.isim.includes(isimyakinomur) || item.nomur.includes(isimyakinomur));
        korunmayuzyiglash(izdax_natijisi);
    }

    function korunmayuzyiglash(tizimliklar) {
        let nomur_tizimlik_html = "";
        tizimliklar.forEach((item, index) => {
            nomur_tizimlik_html += `<div onclick="tallax(${index}, '${item.isim}', '${item.nomur}')" class="height-64px row margin-top-8px bg-white radius-all-8px margin-lr-8px rtl vertical-center">
                <div class="width-32px height-32px radius-all-16px bg-blue txt-white center margin-lr-8px">
                    ${item.isim.slice(0, 2)}
                </div>
                <div class="column full-height">
                    <div class="space-full margin-right-8px vertical-center">${item.isim}</div>
                    <div class="space-full txt-gray4 margin-right-8px vertical-center">${item.nomur}</div>
                </div>
            </div>`
        });
        nomurlar.innerHTML = nomur_tizimlik_html;
    }

    function tahrirlax_biti(halat) {
        if (halat === 'O') {
            isim_ramkisi.value = nowattiki_isim.innerHTML;
            nomur_ramkisi.value = nowattiki_nomur.innerHTML;
            rasim_adirsi.value = nowattiki_rasim.src;
            rasim.src = nowattiki_rasim.src;
            ozgartix_saklax.style.display = "flex";
            koxux_saklax.style.display = "none";
        } else {
            isim_ramkisi.value = "";
            nomur_ramkisi.value = "";
            rasim_adirsi.value = "";
            ozgartix_saklax.style.display = "none";
            koxux_saklax.style.display = "flex";
        }
        edit.style.display = "flex";
        main.style.display = "none";
    }

    function tallax(index, isim, nomuer) {
        nowattiki.style.display = "flex";
        nowattiki_index = index;
        if (tizimlik[index].rasim_adirsi === "") nowattiki_rasim.src = "https://img2.baidu.com/it/u=46657621,1499519496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";
        else nowattiki_rasim.src = tizimlik[index].rasim_adirsi;
        nowattiki_isim.innerHTML = isim;
        nowattiki_nomur.innerHTML = nomuer;
    }

    function rasim_yukle() {
        let rasim_img = document.getElementById("rasim");
        rasim_img.src = rasim_adirsi.value;
    }

    function qikinx() {
        main.style.display = "flex";
        edit.style.display = "none";
    }
</script>